import QtQuick
import QtQuick.Controls
import Qt.labs.platform

Rectangle {
    id: uploadLEDWin
    width: 640
    height: 480
    clip: true
    visible: false
    color: mBackColor

    signal uploadEffectOver()

    property int noteIndex: 0
    property var noteStr

    property color mBackColor: "#34393e"
    property color mTextColor: "#e1e4e8"
    property color mContentColor: "#44484d"

    property var helpContent: qsTr(" \
1. 点击预览可操作设备播放输入ID的灯效，点击更新可更新设备上输入ID的灯效，体现在其输入框\n \
2. 点击获取可查看设备的CAN私有/公有ID，点击设置可设置设备的CAN私有/公有ID，体现在其输入框\n \
3. 设置设备的CAN私有/公有ID后，设备会重启且网络名称会变更，请注意重连设备网络\n \
4. 以上操作请确保与设备的网络连接，设备状态可在主页右下角查看 \
")
    // 设置记录内容
    function setNoteContent(note) {
        settingNoteModel.append({ "noteTitle": Qt.formatDateTime(new Date(), "hh-mm-ss"), "noteText": note })
    }

    Connections {
        target: myHttp

        // 绑定http上传进度变化信号
        function onUploadProgressChanged(suffix, sendBytes, allBytes) {
            if(uploadLEDWin.visible) {
                if(myHandle.strContains(suffix, "upload")) {
                    // 设置进度条
                    if(sendBytes !== allBytes) {
                        progressBar.cpbValue = sendBytes / allBytes
                    } else {
                        progressBar.cpbValue = 1
                    }
                }
            }
        }
        // 绑定http回复内容完成信号
        function onRequestFinished(ret) {
            if(uploadLEDWin.visible) {
                var strList = ["", ""]
                if(myHandle.strContains(ret, "private") || myHandle.strContains(ret, "public")) {
                    strList = myHandle.httpResultHandle(ret, true)
                    if(myHandle.strContains(strList[0], "private")) {
                        privateCANID.inputText = strList[1]
                        setNoteContent(noteStr + strList[1])
                    } else if(myHandle.strContains(strList[0], "public")) {
                        publicCANID.inputText = strList[1]
                        setNoteContent(noteStr + strList[1])
                    }
                } else {
                    strList = myHandle.httpResultHandle(ret, false)

                    if(myHandle.strContains(strList[0], "preview")) {
                        setNoteContent(noteStr + strList[1])
                    } else if(myHandle.strContains(strList[0], "upload")) {
                        setNoteContent(noteStr + strList[1])
                    }
                }
            }
        }
    }

    CustomHeaderBarClose {
        id: headerBar
        x: 0
        y: 0
        width: parent.width
        height: 34
        chbTitleText: qsTr("更新灯效和设置参数")
        chbHelpText: helpContent

        onClosePageBtnClicked: {
            parent.visible = false
        }
    }

    Column {
        anchors.top: headerBar.bottom
        anchors.bottom: progressBar.top
        width: parent.width
        spacing: 20
        padding: 20

        CustomBorderTitle {
            id: cbtUploadEffect
            width: parent.width - parent.padding * 2
            height: 70
            radius: 10
            cbtTitle: qsTr("更新灯效")
            cbtTitleBackColor: mBackColor
            cbtTitleX: 30
            cbtFontSize: 14
            cbtTitleColor: mTextColor
            color: mContentColor

            Row {
                x: 10
                y: 20
                width: parent.width
                height: 30
                spacing: 20

                TitleTextInput {
                    id: ledEffectNum
                    width: 200
                    height: parent.height
                    titleText: qsTr("灯效序号(1-255):")
                    titleWidth: 140
                    textColor: mTextColor
                    textSize: 14
                    inputBackColor: mContentColor
                    inputBorderWidth: 1
                    inputBorderColor: "#888888"
                    inputText: "1"
                    inputValidator: RegularExpressionValidator { regularExpression: /[0-9]{1,3}/ } // 文本验证器 仅可输入数字
                }

                AsButton {
                    id: previewEffectBtn
                    width: 60
                    height: parent.height
                    text: qsTr("预览")
                    font.pixelSize: 14
                    backColor: mContentColor
                    textColor: mTextColor
                    itemRadius: 8

                    onClicked: {
                        noteStr = qsTr("预览灯效: ")
                        myHandle.previewLedEffect(ledEffectNum.inputText)
                    }
                }

                AsButton {
                    id: uploadBtn
                    width: 60
                    height: parent.height
                    text: qsTr("更新")
                    font.pixelSize: 14
                    backColor: mContentColor
                    textColor: mTextColor
                    itemRadius: 8

                    onClicked: {
                        progressBar.reset()
                        noteStr = "更新灯效: "
                        // http上传灯效文件
                        myHandle.uploadLedEffect(ledEffectNum.inputText+".ld")
                    }
                }
            }
        }

        CustomBorderTitle {
            id: cbtPrivateID
            width: parent.width - parent.padding * 2
            height: 70
            radius: 10
            cbtTitle: qsTr("私有ID")
            cbtTitleBackColor: mBackColor
            cbtTitleX: 30
            cbtFontSize: 14
            cbtTitleColor: mTextColor
            color: mContentColor

            Row {
                x: 10
                y: 20
                width: parent.width
                height: 30
                spacing: 20

                TitleTextInput {
                    id: privateCANID
                    width: 200
                    height: parent.height
                    titleText: qsTr("CAN私有ID(hex):")
                    titleWidth: 140
                    textColor: mTextColor
                    textSize: 14
                    inputBackColor: mContentColor
                    inputBorderWidth: 1
                    inputBorderColor: "#888888"
                    inputText: "1"
                    inputValidator: RegularExpressionValidator { regularExpression: /[0-9A-F]{0,3}/ } // 文本验证器 仅可输入数字
                }

                AsButton {
                    id: getPrivateIDBtn
                    width: 60
                    height: parent.height
                    text: qsTr("获取")
                    font.pixelSize: 14
                    backColor: mContentColor
                    textColor: mTextColor
                    itemRadius: 8

                    onClicked: {
                        noteStr = qsTr("获取CAN私有ID: 0x")
                        myHandle.getDeviceCANID("private")
                    }
                }

                AsButton {
                    id: setPrivateIDBtn
                    width: 60
                    height: parent.height
                    text: qsTr("设置")
                    font.pixelSize: 14
                    backColor: mContentColor
                    textColor: mTextColor
                    itemRadius: 8

                    onClicked: {
                        noteStr = qsTr("设置CAN私有ID: 0x" + privateCANID.inputText)
                        myHandle.setDeviceCANID(privateCANID.inputText, "private")
                        setNoteContent(noteStr)
                    }
                }
            }
        }

        CustomBorderTitle {
            id: cbtPublicID
            width: parent.width - parent.padding * 2
            height: 70
            radius: 10
            cbtTitle: qsTr("公有ID")
            cbtTitleBackColor: mBackColor
            cbtTitleX: 30
            cbtFontSize: 14
            cbtTitleColor: mTextColor
            color: mContentColor

            Row {
                x: 10
                y: 20
                width: parent.width
                height: 30
                spacing: 20

                TitleTextInput {
                    id: publicCANID
                    width: 200
                    height: parent.height
                    titleText: qsTr("CAN公有ID(hex):")
                    titleWidth: 140
                    textColor: mTextColor
                    textSize: 14
                    inputBackColor: mContentColor
                    inputBorderWidth: 1
                    inputBorderColor: "#888888"
                    inputText: "1"
                    inputValidator: RegularExpressionValidator { regularExpression: /[0-9A-F]{0,3}/ } // 文本验证器 仅可输入数字
                }

                AsButton {
                    id: getPublicIDBtn
                    width: 60
                    height: parent.height
                    text: qsTr("获取")
                    font.pixelSize: 14
                    backColor: mContentColor
                    textColor: mTextColor
                    itemRadius: 8

                    onClicked: {
                        noteStr = qsTr("获取CAN公有ID: 0x")
                        myHandle.getDeviceCANID("public")
                    }
                }

                AsButton {
                    id: setPublicIDBtn
                    width: 60
                    height: parent.height
                    text: qsTr("设置")
                    font.pixelSize: 14
                    backColor: mContentColor
                    textColor: mTextColor
                    itemRadius: 8

                    onClicked: {
                        noteStr = qsTr("设置CAN公有ID: 0x" + publicCANID.inputText)
                        myHandle.setDeviceCANID(publicCANID.inputText, "public")
                        setNoteContent(noteStr)
                    }
                }
            }
        }

        CustomBorderTitle {
            id: cbtSettingNote
            width: parent.width - parent.padding * 2
            height: parent.height - cbtPublicID.height * 3 - parent.padding * 2 - parent.spacing * 3
            radius: 10
            cbtTitle: qsTr("操作记录")
            cbtTitleBackColor: mBackColor
            cbtTitleX: 30
            cbtFontSize: 14
            cbtTitleColor: mTextColor
            color: mContentColor

            ListModel {
                id: settingNoteModel
//                ListElement { noteTitle: qsTr("123"); noteText: qsTr("456") }
            }

            ListView {
                id: settingNoteListView
                x: 10
                y: 10
                width: parent.width - 20
                height: parent.height - 20
                clip: true
                spacing: 1

                model: settingNoteModel
                delegate: settingNoteDelegate

                ScrollBar.vertical: AsScrollBar{}

                CustomMenu1 {
                    id: noteRightBtnMenu
                    width: 60
                    height: 40
                    color: "#34393e"
                    cmTextColor: "#e1e4e8"
                    cmFontSize: 13
                    cmItemHeight: height / menuText.length

                    property var menuText: ["删除", "清空"]

                    Component.onCompleted: {
                        for(var i = 0; i < menuText.length; i++) {
                            noteRightBtnMenu.cmListModel.set(i, {"mText": menuText[i]})
                        }
                    }

                    onCustomMenuClicked: function(index) {
                        switch(index) {
                            case 0: settingNoteModel.remove(noteIndex); break;
                            case 1: settingNoteModel.clear(); break;
                        }
                    }
                }
            }

            Component {
                id: settingNoteDelegate

                Rectangle {
                    width: parent.width
                    height: 16
                    color: mBackColor

                    MouseArea {
                        anchors.fill: parent
                        acceptedButtons: Qt.LeftButton | Qt.RightButton

                        onClicked: function(mouse) {
                            if(mouse.button === Qt.RightButton) {
                                noteIndex = index
                                noteRightBtnMenu.open(mouse.x, mouse.y + index * parent.height)
                            } else {
                                focus = true
                            }
                        }
                    }

                    Text {
                        id: noteTimeText
                        width: 80
                        height: parent.height
                        text: noteTitle + ":"
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        color: mTextColor
                    }

                    Text {
                        id: noteContentText
                        anchors.left: noteTimeText.right
                        anchors.right: parent.right
                        height: parent.height
                        text: noteText
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignLeft
                        color: mTextColor
                    }
                }
            }
        }
    }

    CustomProgressBar1 {
        id: progressBar
        width: parent.width
        height: 16
        anchors.bottom: parent.bottom
        cpbForeGradient: 100
        cpbBackColor: mContentColor
        cpbTextColor: "#FFFFFF"

        onAnimationOver: {
            uploadEffectOver()
        }
    }
}
